import xPanel from './xPanel.js';
import xID from "./xID.js";
import {replaceByObj,overrideObj,compareJSON} from "./xUtil.js";
import xAlert from "./xAlert.js";
import confirmModal from "./confirmModal.js";


const tmplBase = `
<div class="modal" tabindex="-1" style="display:none" id="{{id}}">
  <div class="modal-dialog {{style}}">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"></h5>
        <div class ="modal-control">
          <span class="iFullScreen flat" type="full-screen"></span>
          <span class="iClose flat" type ="close"></span>
        </div>
      </div>
      <div class="modal-body">
         <div  id ="{{panelId}}"></div>
      </div>
      <div class="modal-footer">  
        <button  class="btn  btn-primary" type="commit">
          <span class="iCommit">提交</span>
        </button>
        <button  class="btn btn-secondary" type="close">
           <span class="iClose">退出</span>
        </button>
        <span class="mr-2"></span>
      </div>
    </div>
  </div>
</div>
` ;

/*
   cfg:
   {
   	binds,
    col: ,
    grid:,
    obj: ,
              	
   }
 * */
export default class xUpdateModal {
    $root;
    
    vIDs = {
    	id:xID.getID(),
    	panelId:xID.getID()
    }
    
    vCfg;
    //最初的值
    vInitObj;
    vPanel;
    // create or update
    vType;
    vRefresh =false;

	constructor(cfg) {
        $('body').append(replaceByObj(tmplBase,{...this.vIDs,style:cfg.style||''}));
        this.$root = $('#'+this.vIDs.id);
        this.vCfg = cfg;
	};

	/* 渲染区块 开始 */
	init() {
		this.initPanel();
	    this.$root.on('click','[type ="full-screen"]',this.evFull.bind(this));
        this.$root.on('click','[type="close"]',this.evClose.bind(this));
        this.$root.on('click','[type="commit"]',this.evCommit.bind(this));
        this.$root[0].addEventListener('RequestOver.success', this.evRequestOver.bind(this));
        this.$root[0].addEventListener('RequestOver.error', this.evRequestOver.bind(this));
	}
	
	initPanel(){		
		this.vPanel = new xPanel({
            el: this.vIDs.panelId,
            binds: this.vCfg.binds,
            col: this.vCfg.col,
            grid: 'container',
            group:this.vCfg.group,
            obj: this.vCfg.obj
        });
        this.vPanel.init();
	}

	refresh(){
	    this.vPanel.renderGrid();
    }

	setCommit(cbCommit){
	    this.vCfg.commit = cbCommit;
    }

	show(obj,type){
	    this.vType = type||'create';
	    //保留
	    this.vInitObj = obj;

        if(obj)
            overrideObj(this.vCfg.obj,obj);
	    this.renderType();
	    this.setNonUpdate();
        this.$root.find('[type="commit"]').removeAttr("disabled");
	    this.$root.fadeIn();
    }

    setInitObj(obj){
	    overrideObj(this.vInitObj,obj);
    }

    renderType(){
	    let title = this.vType =='create'?'新增':'编辑';
	    this.$root.find('.modal-title').html(title);
    }

    setNonUpdate(){
	    for(let i=0;i<this.vCfg.binds.length;i++){
	        let cfg = this.vCfg.binds[i];
	        if(cfg.nonUpdate){
	            if(this.vType=='create')
	                this.vPanel.setItemReadonly(i,false);
	            else
                    this.vPanel.setItemReadonly(i,true);
	        }
        }

    }

	evFull(e){
       let $dialog = this.$root.find('.modal-dialog') ;
       let $span = this.$root.find('[data-key="full-screen"]');
       if($dialog.hasClass('modal-fullscreen')){
       	   $dialog.removeClass('modal-fullscreen');
           $span.removeClass('iExitFull');
           $span.addClass('iFullScreen');
       }else{
       	   $dialog.addClass('modal-fullscreen');
           $span.addClass('iExitFull');
           $span.removeClass('iFullScreen');
       }

    }

    evClose(e){
	    let _this = this;
	    let tagName= e.currentTarget.tagName;
	    function close(){
            _this.$root.hide();
            if(_this.vCfg && _this.vCfg.cancle)
                _this.vCfg.cancle(_this.vRefresh);
        }
	    if(compareJSON(this.vCfg.obj,this.vInitObj)){
            close();
        }else{
            confirmModal.pop({content:"确认要放弃修改!",type:"warn",
                target:e.currentTarget,
                placement: tagName =='SPAN'?"downright":"top",
                confirm:() => close() })
        }

    }

    evCommit(e){
        //this.$root.hide();
        //防止重复提交
        if(!this.vPanel.verify()){
            xAlert.error("出错! 请核对数据后再提交.",2000);
            return;
        }

        if(this.vCfg && this.vCfg.commit){
            $(e.currentTarget).attr("disabled",true);
            this.vRefresh = true;
            this.vCfg.commit();
        }
    }

    evRequestOver(e){
        if(e.type =='RequestOver.success'){
            if(this.vType == 'create')
                overrideObj(this.vCfg.obj,this.vInitObj);
            else
                overrideObj(this.vInitObj,this.vCfg.obj);
        }
        this.$root.find('[type="commit"]').removeAttr("disabled");
    }
}